<template>
	<view class="container">
		<!-- 用户信息区 -->
		<view class="user-info">
			<image class="avatar" :src="userInfo.avatar || defaultAvatar" mode="aspectFill" @click="goToProfile">
			</image>
			<view class="user-text" @click="goToProfile">
				<text class="username">{{ userInfo.nickname || '点击登录' }}</text>
				<text class="level" v-if="userInfo.level">LV{{ userInfo.level }}</text>
				<text class="divider">|</text>
				<text>个人资料</text>
			</view>
		</view>

		<!-- 功能列表 -->
		<view class="grid-section">
			<GridItem label="消息中心" emoji="🔔" url="/pages/message/index" />
			<GridItem label="我的订单" emoji="🛒" url="/pages/order/index" />
			<GridItem label="收藏商品" emoji="❤️" url="/pages/favorite/index" />
			<GridItem label="优惠券" emoji="🎁" url="/pages/coupon/index" />				
		</view>

		<view class="list-section">
			<ListItem title="商品评价"  url="/pages/rating/index" />
			<ListItem title="设置" 	   url="/pages/settings/index" />
			<ListItem title="帮助与反馈" url="/pages/settings/index" />
			<ListItem title="联系客服"   url="/pages/settings/index" />
		</view>

		<!-- 退出登录按钮（仅在已登录时显示） -->
		<view v-if="isLoggedIn" class="logout-btn">
			<button type="default" size="mini" @click="handleLogout">退出登录</button>
		</view>
	</view>
</template>

<script setup>
	import { Auth } from '@/utils/auth.js'
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed, onMounted } from 'vue'
	import GridItem from '@/components/GridItem.vue'
	import ListItem from '@/components/ListItem.vue'
	
	// 默认头像
	const defaultAvatar = '/static/avatar.jpg'
	// 用户信息（模拟数据）
	const userInfo = ref(Auth.getUserInfo({
		nickname: '游客',
		avatar: '/static/avatar.jpg',
		level: '普通会员',
	}))

	// 是否已登录
	const isLoggedIn = computed(() => !!userInfo.value.nickname)

	// 页面加载
	onLoad(() => {
		console.log('我的页面加载')
		// 可在此处请求用户信息
		// loadUserInfo()
	})

	// 跳转函数
	const navigateTo = (url) => {
		uni.navigateTo({
			url
		})
	}

	// 进入个人资料页
	const goToProfile = () => {
		if (isLoggedIn.value) {
			navigateTo('/pages/my/profile')
		} else {
			navigateTo('/pages/login/index')
		}
	}

	// 退出登录
	const handleLogout = () => {
		uni.showModal({
			title: '确认退出',
			success: function(res) {
				if (res.confirm) {
					userInfo.value = {}
					// uni.reLaunch({ url: '/pages/index/index' })
				}
			}
		})
	}
</script>

<style lang="scss">
	.user-info {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx 100rpx 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
		background: linear-gradient(135deg, #007aff, #007aff, #007aff);
		color: white;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.user-text {
		flex: 1;
	}

	.username {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
	}

	.level {
		font-size: 24rpx;
		color: #efb506;
		padding: 2rpx 10rpx;
		border-radius: 4rpx;
		margin-top: 8rpx;
	}

	.arrow-icon {
		margin-left: auto;
	}

	.grid-section {
		background: #fff;
		margin: -60rpx 30rpx 30rpx;
		border-radius: 20rpx;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		padding: 30rpx 0;
	}
	

	.list-section {
		background: #fff;
		margin: 0 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
	}
	
	.logout-btn {
		text-align: center;
		padding: 60rpx;

		button {
			background-color: #fff;
			border: 1px solid #ddd;
			border-radius: 8rpx;
			font-size: 28rpx;
			color: #666;
		}
	}
</style>